<!--
 * @Author: DeluxePig 250293786@qq.com
 * @Date: 2024-06-05 23:17:14
 * @LastEditors: zhayang 1063975710@qq.com
 * @LastEditTime: 2024-06-18 22:23:45
 * @FilePath: \easy-talk\src\views\home\index.vue
 * @Description: 我的关注——名片
-->
<template>
  <div class="userCardBox">
    <div class="top-right-body-cont">
      <div class="user-box">
        <div class="user-img-box">
          <img
            class="z-img"
            :src="
              userData.icon && userData.icon !== '' ? userData.icon : userLogo
            "
            alt=""
          />
        </div>
        <div class="user-info-box">
          <div class="info name">
            {{ userData.real_name }}
            <el-button
              class="cancel-btn"
              @click="delFollowFun()"
            >
              取消关注
            </el-button>
          </div>
          <div class="info phone">
            {{ userData.unit_title }} | {{ userData.unit_department }}
          </div>
          <div class="info hospital">
            <span
              v-if="userData.unit_level && userData.unit_level !== ''"
              class="hospital-level"
            >
              <i class="iconfont icon-yiyuan1"></i>
              {{ userData.unit_level }}
            </span>
            {{ userData.unit_name }}
          </div>
        </div>
      </div>
      <div
        v-if="honorData.length > 0"
        class="honor-box"
      >
        <div
          v-for="(item, index) in honorData"
          :key="index"
          class="honor"
        >
          <span class="iconfont icon--"></span>
          {{ item }}
          <span class="iconfont icon--1"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userLogo from '@/assets/images/user-logo.png'
import { deltFollowApi } from '@/api/user'
export default {
  name: 'UserCard',
  props: {
    cardData: {
      type: Object,
      default: function () {
        return {
          id: 5,
          users_uniqueid: 'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr',
          link_users_uniqueid: '3d35138060d5423c8a407db148bb4209',
          create_datetime: '2024-05-29 15:29:41',
          update_datetime: '2024-05-29 15:29:41',
          follow_user_info: {
            // 关注人信息
            users_uniqueid: '3d35138060d5423c8a407db148bb4209',
            real_name: '', // 姓名
            icon: '', // 头像
            unit_name: '', // 单位名称
            unit_logo: '', // 单位logo
            unit_department: '', // 部门
            unit_title: '', // 职位
            unit_job: '', // 任职
            intro: '', // 简介
            create_datetime: '2024-05-29 15:31:27',
            update_datetime: '2024-05-29 15:31:27',
            unit_level: '', // 单位级别
            real_photo: '' // 真人照片
          }
        }
      }
    }
  },
  data() {
    return {
      userLogo: userLogo,
      userData: {
        users_uniqueid: '3d35138060d5423c8a407db148bb4209',
        real_name: '', // 姓名
        icon: '', // 头像
        unit_name: '', // 单位名称
        unit_logo: '', // 单位logo
        unit_department: '', // 部门
        unit_title: '', // 职位
        unit_job: '', // 任职
        intro: '', // 简介
        create_datetime: '2024-05-29 15:31:27',
        update_datetime: '2024-05-29 15:31:27'
      },
      honorData: ['中国医药教育协会胸外科专委会常务委员']
    }
  },
  computed: {},
  watch: {
    cardData: {
      handler(nv) {
        this.userData = nv.follow_user_info
        if (
          nv.follow_user_info.unit_job &&
          nv.follow_user_info.unit_job !== ''
        ) {
          this.honorData = nv.follow_user_info.unit_job.split(',')
        } else {
          this.honorData = []
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {},
  methods: {
    delFollowFun() {
      const that = this
      this.$confirm('确认取消关注?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const data = {
            link_users_uniqueid: that.cardData.users_uniqueid
          }
          deltFollowApi(data).then((res) => {
            that.$emit('delFun')
          })
        })
        .catch(() => {
          //
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.userCardBox {
  width: 370px;
  height: 165px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin: 13px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
  padding: 20px;

  .top-right-body-cont {
    width: 100%;
    height: 100%;

    .user-box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 80px;
      position: relative;

      .user-img-box {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #eee;

        .z-img {
          width: 100%;
          height: 100%;
        }
      }

      .user-info-box {
        width: calc(100% - 80px);
        height: 76px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        padding-left: 12px;
        font-size: 14px;
        color: #9e9e9e;

        .info {
          line-height: 26px;
        }

        .name {
          font-weight: 600;
          font-size: 20px;
          color: #1c1f23;
          width: 100%;
          position: relative;

          .cancel-btn {
            position: absolute;
            right: 0;
            top: 0;
            padding: 4px 8px;
            font-size: 10px;
          }
        }

        .hospital {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #6a6b6c;
          line-height: 16px;
          text-align: left;

          .hospital-level {
            display: inline-block;
            background: rgba(4, 209, 184, 0.1);
            border-radius: 4px 4px 4px 4px;
            padding: 2px 4px;
            margin-right: 8px;
            font-size: 14px;
            color: #08bda7;

            .iconfont {
              font-size: 12px;
              vertical-align: top;
              margin-right: 2px;
            }
          }
        }
      }
    }

    .honor-box {
      height: calc(100% - 76px);
      width: fit-content;
      margin-top: 6px;
      overflow-y: auto;

      .honor {
        background: linear-gradient(90deg, #f7f2e4 0%, #ffefcb 100%);
        border-radius: 4px;
        padding: 3px 16px;
        font-weight: 400;
        font-size: 12px;
        color: #ae6b1a;
        line-height: 14px;
        margin: 2px;

        .iconfont {
          color: rgba(174, 107, 26, 0.2);
        }
      }
    }
  }
}
</style>
